<template>
  <div class="mate-form-1-outer">
    <div style="display: flex">
      <Button @click="handleSubmit">提交</Button>
      <Button @click="handleExport">导出</Button>
      <Button @click="handleImport">导入</Button>
      <db-info-bar ref="dbInfoRef"></db-info-bar>
    </div>
    <div style="margin-bottom: 4px">
      <Table border :columns="tableColumn" :data="tableData" :height="500">
        <template slot-scope="{ row }" slot="title">
          <Input v-model="row.title" @on-change="changeValue(row, 'title')" />
        </template>
        <template slot-scope="{ row }" slot="showType">
          <Select v-model="row.showType" clearable @on-change="changeValue(row, 'showType')">
            <Option v-for="item in showTypeList" :value="item.key" :key="item.key">{{ item.title }}</Option>
          </Select>
        </template>
        <template slot-scope="{ row }" slot="dataType">
          <Select v-model="row.dataType" clearable @on-change="changeValue(row, 'dataType')">
            <Option v-for="item in dataTypeList" :value="item.key" :key="item.key">{{ item.title }}</Option>
          </Select>
        </template>
        <template slot-scope="{ row }" slot="format">
          <span>{{ row.format }}</span>
        </template>
        <template slot-scope="{ row }" slot="notNull">
          <i-switch v-model="row.notNull" size="small" @on-change="changeValue(row, 'notNull')"></i-switch>
        </template>
        <template slot-scope="{ row }" slot="primaryKey">
          <i-switch v-model="row.primaryKey" size="small" @on-change="changeValue(row, 'primaryKey')"></i-switch>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep';
import MateParserConst from './MateParserConst';
import DbInfoBar from './DbInfoBar.vue';

export default {
  components: { DbInfoBar },
  name: 'MateForm3',
  data() {
    return {
      tableColumn: MateParserConst.form1Column,
      tableData: [],

      showTypeList: MateParserConst.showTypeList,
      dataTypeList: MateParserConst.dataTypeList,
    };
  },
  computed: {
    curFile: function () {
      return this.$store.state.curFile;
    },
    headerOrigin: function () {
      return this.$store.state.headerOrigin;
    },
    headerConfig: function () {
      return this.$store.state.headerConfig;
    },
  },
  watch: {
    headerOrigin: function () {
      this.initTableData();
    },
  },
  methods: {
    _getDownloadUrl(text) {
      const BOM = '\uFEFF';
      // Add BOM to text for open in excel correctly
      if (window.Blob && window.URL && window.URL.createObjectURL) {
        const csvData = new Blob([BOM + text], { type: 'application/json' });
        return URL.createObjectURL(csvData);
      } else {
        return 'data:attachment/json;charset=utf-8,' + BOM + encodeURIComponent(text);
      }
    },
    handleImport() {
      this.$refs.dbInfoRef.updateDb(this.curFile.name, this.tableData);
    },
    handleExport() {
      const aaa = JSON.stringify(this.tableData, null, 2);
      const link = document.createElement('a');
      link.download = 'aaa.json';
      link.href = this._getDownloadUrl(aaa);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    changeValue(row, key) {
      const originRow = this.tableData.find(item => {
        return item.name === row.name;
      });
      originRow[key] = row[key];
    },
    handleSubmit() {
      this.$emit('on-return', this.tableData);
    },
    initTableData() {
      if (this.headerConfig.length === 0) {
        this.tableData = this.headerOrigin.map(item => {
          return {
            name: item,
            title: null,
            showType: null,
            dataType: null,
            format: null,
            notNull: false,
            primaryKey: false,
          };
        });
      } else {
        this.tableData = cloneDeep(this.headerConfig);
      }
    },
  },
  mounted() {
    this.initTableData();
  },
};
</script>

<style scoped>
</style>
